MessageTray: wait until the tray is hidden to switch styles

Switching style on Overview::hiding creates a weird effect, as the noise
texture is shown while the overview is still visibile. Instead, wait for
the tray to be fully hidden, then apply the new style.
As now the switch is invisible, there is no need for the transition
(which introduced the same problem on overview showing)

https://bugzilla.gnome.org/show_bug.cgi?id=689091

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 5b957e4bcd37527945e4685c9c0414b30a1f9989..34e1afed3091960eecabcfe5765fbcebdcb0230d 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1313,7 +1313,6 @@ StScrollBar StButton#vhandle:active {
 #message-tray {
     background: #2e3436 url(message-tray-background.png);
     background-repeat: repeat;
-    transition-duration: 250ms;
     height: 72px;
 }
 

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 9e408ff684d2931a37faa4ad5235018e144620ee..bc9bb78f0a74902ab7685acc1262c57d31a1415e 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1515,7 +1515,6 @@ const MessageTray = new Lang.Class({
             function() {
                 this._overviewVisible = false;
                 this._escapeTray();
-                this.actor.remove_style_pseudo_class('overview');
                 this._updateState();
             }));
 
@@ -2190,7 +2189,9 @@ const MessageTray = new Lang.Class({
         this._tween(this.actor, '_trayState', State.HIDDEN,
                     { y: 0,
                       time: ANIMATION_TIME,
-                      transition: 'easeOutQuad'
+                      transition: 'easeOutQuad',
+                      onComplete: this._onTrayHidden,
+                      onCompleteScope: this
                     });
 
         // Note that we might have entered here without a grab,
@@ -2200,6 +2201,11 @@ const MessageTray = new Lang.Class({
         this._lightbox.hide();
     },
 
+    _onTrayHidden: function() {
+        if (!this._overviewVisible)
+            this.actor.remove_style_pseudo_class('overview');
+    },
+
     _hideDesktopClone: function(now) {
         this._tween(this._desktopClone, '_desktopCloneState', State.HIDDEN,
                     { y: 0,